<template>

	<view class="main">
		<u-navbar title="到店导航" placeholder="true" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<map show-location class="ditu" :latitude="latitude" :longitude="longitude" :scale="scale"></map>

		<view class="info">

			<view>
				<!-- 搜索栏 -->
				<u-search @focus="toUrl('/pages/index/searchadd')" placeholder="搜索门店" @custom="onSearch" @search="onSearch" />



				<z-paging ref="paging" v-model="list" @query="queryList" usePageScroll>
					<u-list>
						<view v-for="(store, index) in list" :key="index" class="store-item">
							<view class="row">

								<!-- 店铺信息 -->
								<view class="store-info">
									<view class="row space-between botte">
										<view class="row_a_c">
											<image v-if="index==0" class="xxa" src="/static/images/xxa.png"></image>
											<image v-else class="xxa" src="/static/images/xxahui.png"></image>
											<view class="store-title">{{ store.name }}</view>
										</view>
										<view class="store-distance">{{ store.distance }}km</view>
									</view>

									<view class="row space-between botte">
										<view class="row_a_c">
											<image class="dw" src="/static/images/dw.png"></image>
											<view class="store-address">{{ store.address }}</view>
										</view>

										<view class="row_a_c">
											<image @click="makePhoneCall(store.contact_phone)" class="phone" src="/static/images/phone.png"></image>
											<image class="dhbb" src="/static/images/dhbb.png" @click="daohang(store.latitude,store.longitude)"></image>
										</view>
									</view>

									<view class="row space-between botte">
										<view class="row_a_c">
											<image class="time" src="/static/images/time.png"></image>
											<view class="store-time">{{ store.business_hours }}</view>
										</view>
									</view>

								</view>

							</view>

						</view>
					</u-list>

				</z-paging>


			</view>

		</view>
	</view>

</template>

<script>
	import api_index from '@/api/index.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';

	export default {
		mixins: [ZPMixin],


		async onShow() {
			this.getUserLocation();

		},

		data() {
			return {
				longitude: 116.33,
				latitude: 40.0,
				scale: 14, //地图缩放程度
				list: [],

			};
		},
		methods: {

			//打电话
			makePhoneCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel, // 这里替换成你想拨打的电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.error('拨打电话失败', err);
					}
				});
			},

			//获取经纬度
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => { // 使用箭头函数保持上下文
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						console.log('Latitude:', this.latitude);
						console.log('Longitude:', this.longitude);
						if (this.latitude && this.longitude)
							// this.getStoreListFuc();
							// this.$refs.paging.reload();
							this.$nextTick(() => {
								console.log('地图数据更新完成');
							});
					},
					fail: (err) => {
						console.error('获取位置失败', err);
					}
				});
			},

			//导航
			daohang(latitude, longitude) {
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						console.log('success');
					}
				})
			},


			async queryList(pageNo, pageSize) {

				const per = {
					no_page: pageNo,
					page_size: pageSize,
					longitude: this.longitude,
					latitude: this.latitude,
				}


				const res = await api_index.getStoreList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}

			},





			//获取门店列表
			// async getStoreListFuc() {
			// 	var per = {
			// 		longitude: this.longitude,
			// 		latitude: this.latitude,
			// 	}
			// 	const res = await api_index.getStoreList(per);
			// 	if (res.code == 1) {
			// 		this.list = res.data.list
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },


			toUrl(url) {
				this.navTo(url);
			},
			onSearch(value) {
				console.log('Search:', value);
			},


		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.info {
		width: 100%;

		min-height: 800rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: absolute;

		top: 640rpx;
		padding: 50rpx 32rpx 32rpx 32rpx;
	}

	.ditu {
		width: 100%;
		height: 680rpx;
	}





	.store-item {


		width: 100%;
		height: 220rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #E7E7E7;
		padding: 30rpx 20rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;


	}



	.store-icon {
		margin-right: 10rpx;
	}

	.store-info {
		flex: 1;
	}

	.store-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.store-address,
	.store-time {
		font-size: 28rpx;
		color: #666;
	}

	.store-distance {
		font-size: 26rpx;
		color: #00cc99;

	}

	.botte {
		margin-bottom: 20rpx;
	}

	.xxa {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.dw {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.phone {
		width: 50rpx;
		height: 48rpx;
		margin-right: 10rpx;
	}

	.dhbb {
		width: 50rpx;
		height: 48rpx;
	}

	.time {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
</style>